<template>
  <div :style="styles">
     {{props.schema.value}}
  </div>
</template>


<script lang="ts" setup>

/**
 * h5 段落
 */

import {watch,computed} from 'vue'
import util from "@/utils/util"
const props = defineProps({
  schema: {
    type: Object,
    default: () => ({}),
  },
});
const styles=computed(()=>{
  let result={
    display: "flex",
  }
  if(props.schema){
    for(let key in props.schema){
      if(key.indexOf("styles.")!=-1){
        let n_key=key.replaceAll("styles.","");
        let value=props.schema[key];
        if(n_key.indexOf("padding-")!=-1){
          // value+="px";
          value+=props.schema.unit?props.schema.unit:"px"
        }
        result[n_key]=value;
      }
    }
    if(!props.schema.value&& props.schema.componentProps.value){
      props.schema.value=props.schema.componentProps.value
    }

  }
  // console.log("---props.schema::",props.schema)
  // console.log("---result::",result)
  return result;

});

function getUnit(){
  return props.schema.unit?props.schema.unit:props.schema.componentProps.unit
}


</script>

<style scoped>

</style>
